<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>文件管理</title>
    <!--<base th:href="${#request.getContextPath()}+'/'">-->
    <base th:href="@{/}">
    <!--bootstrap.min.css-->
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
    <script th:src="@{/bootstrap/js/jquery.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/bootstrap/js/extendPagination.js}"></script>
    <script th:src="@{/bootstrap/js/layopen.js}"></script>
    <link rel="stylesheet" th:href="@{/bootstrap/sys/css/bootstrap_table_render.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/sys/iconfont/file/iconfont.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/my-layer-div.css}"/>
    <style>
        * {
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .box {
            width: 180px;
            height: 240px;
            float: left;
            position: relative;
        }

        .content {
            width: 90%;
            height: 90%;
            border: 2px solid #FFF;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .box:hover .opt {
            display: block;
        }

        .box:hover .content {
            border: 2px solid #0893fb;
        }

        .box:hover .content .img-area {
            border-color: #0893fb;
        }

        .content .detail .d-create,
        .content .detail .d-author {
            display: block;
            line-height: 18px;
        }

        .content .safe-info .safe .iconfont {
            font-size: 1rem;
            padding-right: 3px;
            color: #009900;
        }

        .content .safe-info .safe {
            float: right;
            padding-right: 5px;
        }

        .content .safe-info {
            display: block;
            width: 100%;
            float: left;
            height: 20px;
            line-height: 20px;
            font-size: 1rem;
        }

        .content .detail {
            width: 100%;
            height: calc(100% - 165px);
            float: left;
            font-size: .1rem;
            color: #999;
            padding: 6px;
            line-height: 1rem;
        }

        .content .img-area {
            width: 100%;
            height: 100%;
            display: block;
            border: 1px solid #E0E2E4;
        }


        .content .img {
            width: 100%;
            height: 145px;
            float: left;
        }

        .content img {
            width: 100%;
            height: 100%;
        }

        .opt .opt_content .opt_btn:hover {
            color: #0893fb;
        }

        .opt .opt_content .opt_btn .iconfont {
            font-size: 1.2rem;
            padding-right: 3px;
        }

        .opt .opt_content .opt_btn {
            width: 33.333333333%;
            text-align: center;
            cursor: pointer;
            font-size: 1.2rem;
            line-height: 2rem;
        }


        .opt .opt_content .opt_btn::before {
            display: inline-block;
            content: "";
            height: 100%;
            vertical-align: middle;
        }

        .opt .opt_content {
            height: calc(100% - 165px);
            margin-top: 165px;
            background: #EEE;
            display: flex;
            justify-content: center;
        }

        .opt {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(90% - 6px);
            height: calc(90% - 6px);
            z-index: 2;
        }
    </style>
</head>
<body>
<div id="callBackPagination" class="piece">
    <div id="toolbar">
        <span class="tool_left">
            <span class="btn addBtn">上传文件</span>
        </span>
        <span class="tool_right"></span>
    </div>
    <div id="mainContent" style="overflow-y: auto;"></div>
    <div id="callBackPager"></div>
</div>
</body>
<script th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script type="text/javascript">
    // 初始化参数
    let totalCount = 252, showCount = 1, limit = 20;

    /**
     * 分页回调
     */
    loadInitTable(showCount, limit);

    /**
     * 建表(初始化数据)
     * @param data
     */
    function createTable(data) {
        let html = [];
        if (data.length > 0) {
            for (let i = 0; i < data.length; i++) {
                let imgUrl = data[i].remoteUrl + data[i].filePath;
                html.push('<div class="box">' +
                    '<div class="content">' +
                    '<div class="img-area">' +
                    '<span class="img">' +
                    '<img src="' +imgUrl + '" alt="图片"/>' +
                    '</span>' +
                    '<span class="safe-info">' +
                    '<span class="safe"><i class="iconfont icon-safe"></i>猿粪认证</span>' +
                    '</span>' +
                    '<span class="detail">' +
                    '<span class="d-author">本文由<span class="author">' + data[i].creator + '</span>创建</span>' +
                    '<span class="d-create">创建时间: 2020年12月11日</span>' +
                    '</span>' +
                    '</div>' +
                    '</div>' +
                    '<div class="opt">' +
                    '<div class="opt_content">' +
                    '<span class="opt_btn" onclick="showImg(\'' + imgUrl + '\')"><i class="iconfont icon-bp-"></i>查看</span>' +
                    '<span class="opt_btn" onclick="delImg(this, ' + data[i].fileKey + ')"><i class="iconfont icon-shanchu"></i>删除</span>' +
                    '<span class="opt_btn" onclick="copyAddr(\'' + imgUrl + '\')"><i class="iconfont icon-fuzhidizhi"></i>地址</span>' +
                    '</div>' +
                    '</div>' +
                    '</div>');
                data[i]['dataIndex'] = i;
            }
        }
        let mainObj = $('#mainContent');
        mainObj.empty();
        mainObj.html(html.join(''));
    }

    /**
     * 展示图片
     * // TODO 优化下, 有时候图片加载两次: 考虑自己做个遮罩层讲图片加载过去
     */
    function showImg(imgUrl) {
        let index = layer.load(1);
        // 图片地址 后面加时间戳是为了避免缓存
        // 创建对象
        let img = new Image();
        // 改变图片的src
        img.src = imgUrl;
        if(img.fileSize > 0 || (img.width > 0 && img.height > 0)) {
            // 加载完成执行
            img.onload = function () {
                layer.close(index);
                // 打印
                let iW = img.width;
                let iH = img.height;
                layer.open({
                    type: 1,
                    skin: 'layui-layer-demo', //样式类名
                    closeBtn: 0, //不显示关闭按钮
                    title: false,
                    shadeClose: true, //开启遮罩关闭
                    area: [iW + 'px', iH + 'px'], //宽高
                    content: img.outerHTML
                });
            };
        }else{
            layer.close(index);
            WarnAlert('文件找不到哦');
        }
    }

    /**
     * 复制元素
     */
    function copyAddr(imgUrl) {
        //如果这里换为 input 则不支持换行
        let temp = document.createElement('textarea');
        temp.value = imgUrl;
        document.body.appendChild(temp);
        temp.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        removeElement(temp);
        SuccessAlert("复制图片链接成功！");
    }


    function removeElement(_element) {
        let _parentElement = _element.parentNode;
        if (_parentElement) {
            _parentElement.removeChild(_element);
        }
    }

    /**
     * 添加按钮
     */
    $('.addBtn').on('click', function () {
        // 没有开发哦
        SuccessAlert('暂时没开发哦, 尽请期待!');
    });

    /**
     * 成功回调
     */
    function editSuccessCallback(data) {
        let row = getRowByKey(data.moodKey);
        updateRow(row, data);
        SuccessAlert('操作成功');
    }

    /**
     * 删除文章
     */
    function delImg(othis,key) {
        layer.confirm('您是是否需要删除此记录？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            let url = 'file/delImg';
            ajaxSyncPost(url, {fileKey: key}, function () {
                layer.load(1);
            }, function (result) {
                layer.closeAll("loading");
                if (result.code === 200) {
                    let _box = $(othis).parents(".box");
                    _box.remove();
                    SuccessAlert('删除成功');
                } else {
                    WarnAlert('请求数据失败, 请稍后重试');
                }
            }, function () {
                layer.closeAll("loading");
                ErrorAlert('后台请求出错, 请稍后重试');
            });
        }, function () {

        });
    }


    /**
     * 加载表格
     * @param curr
     * @param limit
     * @param totalCount
     */
    function loadTable(curr, limit, totalCount) {
        let url = 'file/pageGetImage';
        applyForPage(url, {pageIndex: curr, pageSize: limit}, function (result, count) {
            totalCount = count;
            createTable(result);
        }, function (msg, code) {
            console.log('错误码: ' + code);
            WarnAlert(msg);
        });
    }

    /**
     * 初始化加载表格
     * @param curr
     * @param limit
     */
    function loadInitTable(curr, limit) {
        let url = 'file/pageGetImage';
        ajaxSyncPost(url, {pageIndex: curr, pageSize: limit}, function () {
            layer.load(1);
        }, function (result) {
            layer.closeAll("loading");
            if (result.code === 200) {
                let data = result.data;
                totalCount = result.count;
                createTable(data);
                $('#callBackPager').extendPagination({
                    totalCount: totalCount,
                    showCount: showCount,
                    limit: limit,
                    callback: function (curr, limit, totalCount) {
                        loadTable(curr, limit, totalCount);
                    }
                });
            } else {
                WarnAlert('请求数据失败, 请稍后重试');
            }
        }, function () {
            layer.closeAll("loading");
            ErrorAlert('后台请求出错, 请稍后重试');
        });
    }


    /**
     * 添加行Dom
     */
    function addRowDom(dataIndex, data) {
        let html = [];
        html.push('<tr><td>' + data.name + '</td>');
        html.push('<td>' + data.icon + '</td>');
        html.push('<td>' + data.mean + '</td>');
        html.push('<td>' + JSONUtil.dateFormat('YYYY-mm-dd HH:MM:SS', new Date(data.createTime)) + '</td>');
        html.push('<td>' + createToolbar(data) + '</td>');
        html.push('</tr>');
        $("#mainContent .table tbody").append(html.join(''));
    }

</script>
</html>
